<template>
	<div class="optional-box">
		<!-- 选择器 -->
		<SelectBox :coin-list="coinList" @change-methods="changeMethods"></SelectBox>
		<!-- 表格 -->
		<TablesBox :pay-methods="payMethods"></TablesBox>
	</div>
</template>
<script lang="ts" setup>
import SelectBox from './components/SelectBox.vue';
import TablesBox from './components/TablesBox.vue';

const payMethods = ref<'pay'|'sell'>('pay')

const coinList = ref<any[]>([
	{
		coinName:'USDT',
		id:1
	},
	{
		coinName:'BTC',
		id:2
	},
	{
		coinName:'ETH',
		id:3
	},
	{
		coinName:'BUSD',
		id:4
	}
])

const changeMethods = (val:any) => {
	payMethods.value = val;
}

</script>
<style lang="scss" scoped>
.optional-box {
	padding: 20px 0px;	
}
</style>
